<template>
	<view class="detail-container">
		<view>
			<view class="order-content">
				<view class="content-item">
					<text class="item-name">检查点类型：</text>
					<view style="word-break:break-all;flex: 1;">{{checkPointType[checkInfo['检查点类型']]}}</view>
					<!-- <text>{{ticketDetail['工单编号']}}</text> -->
				</view>
				<view class="content-item">
					<text class="item-name">检查点名称：</text>
					<view style="word-break:break-all;flex: 1;">{{checkInfo['检查点名称']}}</view>
					<!-- <text>{{ticketDetail['联系人姓名']}}</text> -->
				</view>
				<view class="content-item">
					<text class="item-name">检查点地址：</text>
					<view style="word-break:break-all;flex: 1;">{{checkInfo['地址']}}</view>
				</view>
				<view v-if="checkInfo['巡检日期']" class="content-item">
					<text class="item-name">巡检生成日期：</text>
					<view style="word-break:break-all;flex: 1;">{{checkInfo['巡检日期']}}</view>
				</view>
				<view class="content-item">
					<text class="item-name">巡检周期：</text>
					<view style="word-break:break-all;flex: 1;">{{checkInfo['巡检周期'] + '天'}}</view>
				</view>
			</view>
			<view v-if="checkInfo['检查项'].length !== 0" class="check-content" style="margin-bottom: 20rpx;">
				<view class="title">消防检查事项{{'(' + checkInfo['检查项'].length + ')'}}</view>
				<view class="check-item" v-for="(item, index) in checkInfo['检查项']" :key="item.id">
					<view>
						{{index+1}}、{{item['检查项描述']}}
					</view>
					<view class="check-result">结果：
						<uni-data-checkbox v-model="params['巡检项'][index]['评价']" :localdata="status"></uni-data-checkbox>
						<!-- <text v-if="params['巡检项'][index]['评价'] == 2" class="switch">隐藏</text> -->
						<!-- <text class="switch">显示</text> -->
					</view>
					<view class="unquality-check-item" v-if="params['巡检项'][index]['评价'] == 2">
						<view class="desc">问题描述：
							<input v-model="params['巡检项'][index]['描述']" type="text" placeholder="请输入问题描述">
						</view>
						<view class="img-content">
							<text>现场照片:</text>
							<upload v-model="params['巡检项'][index]['附件']" :boxWidth="140"></upload>
						</view>
					</view>
					<!-- <unquality-check v-model="params['巡检项'][index]" ></unquality-check> -->
				</view>
				<!-- <unquality-check></unquality-check> -->
			</view>
			<!-- 设施检查 -->
			<view class="check-content" v-if="checkInfo['设施检查项']">
				<view class="title">设施检查事项</view>
				<view v-if="annihilatorItem.length !== 0">
					<view class="install-type" style="margin-bottom: 40rpx;">灭火器（{{annihilatorLength}}个）</view>
					<view class="check-item" v-for="(item,index) in annihilatorItem" :key="item.id">
						<view>
							{{'(' + (index+1) + ')'}} {{item['检查项描述']}}
						</view>
						<view class="check-result">结果：
							<uni-data-checkbox v-model="annihilatorList[index]['评价']" :localdata="status"></uni-data-checkbox>
							<!-- <text v-if="params['巡检项'][index]['评价'] == 2" class="switch">隐藏</text> -->
							<!-- <text class="switch">显示</text> -->
							<!-- <view v-if="params['设施巡检项'][index]['评价'] == 2">不合格</view> -->
						</view>
						<unquality-facility :checkId="params1['检查点id']" installType="annihilator" @delete="deleteFire(index, $event)" @add="addFire(index, $event)" v-if="annihilatorList[index]['评价'] == 2"></unquality-facility>
					</view>
				</view>
				<view v-if="gasTankItem.length !== 0">
					<view class="install-type" style="margin-bottom: 40rpx;">煤气罐（{{gasTankLength}}个）</view>
					<view class="check-item" v-for="(item,index) in gasTankItem" :key="item.id">
						<view>
							{{'(' + (index+1) + ')'}} {{item['检查项描述']}}
						</view>
						<view class="check-result">结果：
							<uni-data-checkbox v-model="gasTankList[index]['评价']" :localdata="status"></uni-data-checkbox>
							<!-- <text v-if="params['巡检项'][index]['评价'] == 2" class="switch">隐藏</text> -->
							<!-- <text class="switch">显示</text> -->
						</view>
						<unquality-facility :checkId="params1['检查点id']" installType="gasTank" @delete="deleteGas(index, $event)" @add="addGas(index, $event)" v-if="gasTankList[index]['评价'] == 2"></unquality-facility>
					</view>
				</view>
				<view v-if="hydrantItem.length !== 0">
					<view class="install-type" style="margin-bottom: 40rpx;">消防栓（{{hydrantLength}}个）</view>
					<view class="check-item" v-for="(item,index) in hydrantItem" :key="item.id">
						<view>
							{{'(' + (index+1) + ')'}} {{item['检查项描述']}}
						</view>
						<view class="check-result">结果：
							<uni-data-checkbox v-model="hydrantList[index]['评价']" :localdata="status"></uni-data-checkbox>
							<!-- <text v-if="params['巡检项'][index]['评价'] == 2" class="switch">隐藏</text> -->
							<!-- <text class="switch">显示</text> -->
						</view>
						<unquality-facility :checkId="params1['检查点id']" installType="hydrant" @delete="deleteHydrant(index, $event)" @add="addHydrant(index, $event)" v-if="hydrantList[index]['评价'] == 2"></unquality-facility>
					</view>
				</view>
				<view v-if="smokeItem.length !== 0">
					<view class="install-type" style="margin-bottom: 40rpx;">烟雾探测器（{{smokeLength}}个）</view>
					<view class="check-item" v-for="(item,index) in smokeItem" :key="item.id">
						<view>
							{{'(' + (index+1) + ')'}} {{item['检查项描述']}}
						</view>
						<view class="check-result">结果：
							<uni-data-checkbox v-model="smokeList[index]['评价']" :localdata="status"></uni-data-checkbox>
							<!-- <text v-if="params['巡检项'][index]['评价'] == 2" class="switch">隐藏</text> -->
							<!-- <text class="switch">显示</text> -->
						</view>
						<unquality-facility :checkId="params1['检查点id']" installType="smokeDetector" @delete="deleteSmoke(index, $event)" @add="addSmoke(index, $event)" v-if="smokeList[index]['评价'] == 2"></unquality-facility>
					</view>
				</view>
				<view v-if="temperateItem.length !== 0">
					<view class="install-type" style="margin-bottom: 40rpx;">温度探测器（{{temperatelength}}个）</view>
					<view class="check-item" v-for="(item,index) in temperateItem" :key="item.id">
						<view>
							{{'(' + (index+1) + ')'}} {{item['检查项描述']}}
						</view>
						<view class="check-result">结果：
							<uni-data-checkbox v-model="temperateList[index]['评价']" :localdata="status"></uni-data-checkbox>
							<!-- <text v-if="params['巡检项'][index]['评价'] == 2" class="switch">隐藏</text> -->
							<!-- <text class="switch">显示</text> -->
						</view>
						<unquality-facility :checkId="params1['检查点id']" installType="temperatureDetector" @delete="deleteTemperate(index, $event)" @add="addTemperate(index, $event)" v-if="temperateList[index]['评价'] == 2"></unquality-facility>
					</view>
				</view>
				<!-- <unquality-facility></unquality-facility> -->
			</view>
		</view>
		<button class="submit" v-if="personType !== 1" @click="submit">提交</button>
	</view>
</template>

<script>
	import unqualityCheck from '../components/unqualityCheck.vue'
	import unqualityFacility from '../components/unqualityFacility.vue'
	import upload from '../components/upload'
	import { mapState } from 'vuex'
	export default {
		components: {
			unqualityCheck,
			unqualityFacility,
			upload
		},
		data() {
			return {
				params: {
					操作类型: 'complete',
					id: null,
					巡检项: [],
					设施巡检项: []
				},
				params1: {
					检查点id: null
				},
				checkInfo: {},
				status: [{
						text: '合格',
						value: 1
					},
					{
						text: '不合格',
						value: 2
					}
				],
				checkPointType: this.$type.checkPointType,
				hydrantItem: [],
				hydrantList: [],
				hydrantLength: 0,
				annihilatorItem: [],
				annihilatorList: [],
				annihilatorLength: 0,
				smokeItem: [],
				smokeList: [],
				smokeLength: 0,
				temperateItem: [],
				temperateList: [],
				temperatelength: 0,
				gasTankItem: [],
				gasTankList: [],
				gasTankLength: 0
			}
		},
		onLoad(options) {
			console.log(JSON.parse(options.item))
			this.checkInfo = JSON.parse(options.item)
			this.params.id = +JSON.parse(options.item).id
			this.params1.检查点id = +JSON.parse(options.item).检查点id
			if(this.checkInfo.设施检查项 !== null) {
				this.hydrantItem = this.checkInfo.设施检查项.filter(item => item.设备类型 == 'hydrant')
				this.annihilatorItem = this.checkInfo.设施检查项.filter(item => item.设备类型 == 'annihilator')
				this.smokeItem = this.checkInfo.设施检查项.filter(item => item.设备类型 == 'smokeDetector')
				this.temperateItem = this.checkInfo.设施检查项.filter(item => item.设备类型 == 'temperatureDetector')
				this.gasTankItem = this.checkInfo.设施检查项.filter(item => item.设备类型 == 'gasTank')
			}
			this.getInstallList()
			this.checkInfo['检查项'] = this.checkInfo['检查项'] || []
			for (let i = 0; i < this.checkInfo['检查项'].length; i++) {
				let itemObj = {
					id: this.checkInfo['检查项'][i].id,
					评价: null,
					描述: null,
					附件: []
				}
				this.params.巡检项.push(itemObj)
			}
			for (let i = 0; i < this.hydrantItem.length; i++) {
				let itemObj = {
					id: this.hydrantItem[i].id,
					评价: null,
					不合格设备: [],
					描述: null,
					附件: []
				}
				this.hydrantList.push(itemObj)
			}
			for (let i = 0; i < this.annihilatorItem.length; i++) {
				let itemObj = {
					id: this.annihilatorItem[i].id,
					评价: null,
					不合格设备: [],
					描述: null,
					附件: []
				}
				this.annihilatorList.push(itemObj)
			}
			for (let i = 0; i < this.smokeItem.length; i++) {
				let itemObj = {
					id: this.smokeItem[i].id,
					评价: null,
					不合格设备: [],
					描述: null,
					附件: []
				}
				this.smokeList.push(itemObj)
			}
			for (let i = 0; i < this.temperateItem.length; i++) {
				let itemObj = {
					id: this.temperateItem[i].id,
					评价: null,
					不合格设备: [],
					描述: null,
					附件: []
				}
				this.temperateList.push(itemObj)
			}
			for (let i = 0; i < this.gasTankItem.length; i++) {
				let itemObj = {
					id: this.gasTankItem[i].id,
					评价: null,
					不合格设备: [],
					描述: null,
					附件: []
				}
				this.gasTankList.push(itemObj)
			}
			console.log(this.params.巡检项)
		},
		onShow() {

		},
		computed: {
			...mapState(['personType']),
			subIndex() {
				return this.annihilatorItem.length
			}
		},
		methods: {
			// submit() {
			// 	console.log(this.params)
			// },
			// 消防栓
			addFire(index, event) {
				this.annihilatorList[index].不合格设备.push(event)
			},
			deleteFire(index, event) {
				this.annihilatorList[index].不合格设备.splice(event, 1)
			},
			// 煤气罐
			addGas(index, event) {
				this.gasTankList[index].不合格设备.push(event)
			},
			deleteGas(index, event) {
				this.gasTankList[index].不合格设备.splice(event, 1)
			},
			// 消防栓
			addHydrant(index, event) {
				this.hydrantList[index].不合格设备.push(event)
			},
			deleteHydrant(index, event) {
				this.hydrantList[index].不合格设备.splice(event, 1)
			},
			addSmoke(index, event) {
				this.smokeList[index].不合格设备.push(event)
			},
			deleteSmoke(index, event) {
				this.smokeList[index].不合格设备.splice(event, 1)
			},
			addTemperate(index, event) {
				this.temperateList[index].不合格设备.push(event)
			},
			deleteTemperate(index, event) {
				this.temperateList[index].不合格设备.splice(event, 1)
			},
			getInstallList() {
				this.$http.post('gridSystem/device/listWithoutAuth', this.params1).then(res => {
					console.log(res)
					if(res.code === 10000){
						// this.installList = res.data.list
						if(res.data.list !== null) {
							this.hydrantLength = res.data.list.filter(item => item.设施类型 === 'hydrant').length
							this.annihilatorLength = res.data.list.filter(item => item.设施类型 === 'annihilator').length
							this.smokeLength = res.data.list.filter(item => item.设施类型 === 'smokeDetector').length
							this.temperatelength = res.data.list.filter(item => item.设施类型 === 'temperatureDetector').length
							this.gasTankLength = res.data.list.filter(item => item.设施类型 === 'gasTank').length
						}
					}
				})
			},
			submit() {
				this.params.设施巡检项 = [...this.annihilatorList,
					...this.gasTankList, ...this.hydrantList,
					...this.smokeList, ...this.temperateList
				]
				console.log(this.params)
				let flag = this.params.巡检项.every(item => item.评价)
				if(!flag) {
					uni.showToast({
						title: '当前还有未勾选的巡检项',
						icon: 'none'
					})
					return 
				}
				let flag1 = this.params.设施巡检项.every(item => item.评价)
				if(!flag1) {
					uni.showToast({
						title: '当前还有未勾选的设施巡检项',
						icon: 'none'
					})
					return 
				}
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/inspection/ops', this.params).then(res => {
					if (res.code === 10000) {
						console.log(res)
						uni.redirectTo({
							url: '/fireGridCheck/acceptSuccess/acceptSuccess?path=../index/index' + '&title=返回首页'
						})
						// uni.redirectTo({
						// 	url: '/fireGridCheck/acceptSuccess/acceptSuccess?title=' + '提交成功'
						// });
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #f5f5f5;
		min-height: 100%;
		height: auto;
		font-size: 28rpx;
		padding-bottom: 98rpx;
	}

	.van-empty__description {
		margin-top: -4rpx !important;
	}

	.detail-container {
		background-color: #f5f5f5;

		.order-content {
			width: 750rpx;
			background-color: #fff;
			margin-bottom: 135rpx;
			padding-left: 20rpx;
			padding-top: 30rpx;
			margin-bottom: 20rpx;

			.content-item {
				// height: 72rpx;
				padding: 20rpx 20rpx 20rpx 0;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				.item-name {
					width: 200rpx;
					margin-right: 20rpx;
				}
			}

			.content-img {
				width: 100%;
				height: 280rpx;
				display: flex;
				margin-top: 40rpx;

				.img-item {
					width: 220rpx;
					height: 220rpx;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}

					&:last-child {
						margin-right: 0;
					}
				}
			}

			.detail-item {
				width: 750rpx;
				height: 88rpx;
				display: flex;
				line-height: 88rpx;
				// padding-left: 20rpx;
				background-color: #fff;
				border-bottom: 2rpx solid #f5f5f5;

				.left {
					margin-right: 37rpx;
				}

				.sign {
					width: 115rpx;
					height: 88rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					margin-right: 26rpx;
				}
			}
		}

		.check-content {
			height: auto;
			background-color: #fff;
			padding: 20rpx;

			.install-type {
				font-size: 36rpx;
			}

			.title {
				height: 80rpx;
				font-size: 40rpx;
				text-align: center;
				line-height: 60rpx;
				border-bottom: 2rpx solid #DEDEDE;
				margin-bottom: 30rpx;
			}

			.check-item {
				margin-bottom: 40rpx;
				font-size: 32rpx;
				.unquality-check-item {
					width: 674rpx;
					height: 258rpx;
					padding: 20rpx;
					border: 2rpx solid #B5B5B5;
					margin-bottom: 20rpx;

					.desc {
						margin-bottom: 20rpx;
						display: flex;

						input {
							width: 450rpx;
						}
					}

					.img-content {
						display: flex;

						.img-item {
							width: 140rpx;
							height: 140rpx;
							margin: 10rpx;

							.img {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}

			.check-result {
				display: flex;
				align-items: center;

				.switch {
					color: #3080FB;
				}
			}
		}

		.van-empty {
			height: 300rpx;
			margin-bottom: 20rpx;
		}

		.submit {
			position: fixed;
			height: 98rpx;
			text-align: center;
			color: #fff;
			line-height: 98rpx;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 0;
			background-color: #3080FB;

			&::after {
				border-radius: 0;
			}
		}
	}
</style>
